<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/icon.css">
    <script type="text/javascript" src="/manager/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/manager/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [{
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {
                var row = $('#userlist').datagrid("getSelected");
                if (row == null){
                    $.messager.alert("提示","请先选择要修改的用户" ,"info");
                }
	            $.ajax({
                    url: "/manager/role/findById",
                    data: {id: row.id},
                    dataType: 'json',
                    method: 'get',
                    success: function (res) {
                        if (res.code == 200){
                            $("#rid").textbox("setValue", res.data.id);
                            $("#rname").textbox("setValue", res.data.name);
                            let selectedPermission = res.data.permissions;

                            $('#dd').dialog('open');
                            //打开对话框后，

                            // 先清空节点
                            var nodes = $('#ah').tree('getChecked');
                            for (let n of nodes){
                                $('#ah').tree('uncheck', n.target);
                            }

                            // 勾选节点
                            for (let p of selectedPermission) {
                                console.log(p.parentid);
                                if (p.parentid != null){
                                    var node = $('#ah').tree('find', p.id);
                                    $('#ah').tree('check', node.target);
                                }
                            }
                        }
                    }
                })
	        }
	    }, '-', {
	        text: '删除',
	        iconCls: 'icon-cancel',
	        handler: function () {
	            var row = $("#userlist").datalist("getSelected");
	            $.ajax({
                    url:"/manager/role/deleteRole",
                    method: 'get',
                    data: {id: row.id},
                    dataType:'json',
                    success: function (res) {
                        if (res.code =200){
                            $.messager.alert("提示","delete successfully!","info");
                            $("#userlist").datalist("reload");
                        }
                    }
                })
	        }
	    }];
	   $(function(){
	       $('#userlist').datagrid({  
			title:'角色列表',  
			iconCls:'icon-save',
              url: "/manager/role/findAll",
	// 		data:[{
	// 		"id":121,
	// 		"text":"抽烟"
	// 	},{
	// 		"id":122,
	// 		"text":"喝酒"
	// 	},{
	// 		"id":123,
	// 		"text":"烫头"
	// 		},{
	// 		"id":123,
	// 		"text":"看书"
	// 		},{
	// 		"id":123,
	// 		"text":"发呆"
	// 		}
	// ],
			columns:[
			    [
				{field:'id',title:'角色ID',width:100,align:'center'},
				{field:'name',title:'角色名称',width:100,align:'center'},
				{field:'permissions',title:'角色拥有的权限[权限名 | 权限URL | 模块名 | 操作名 ]',width:500,align:'center',formatter:format}
			]
            ],
			pagination:true,
			toolbar: toolbar,
            pageSize: 5,
            singleSelect:true,
            pageList: [5,10,20]
		});
		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                console.log(11111111)
                $('#userlist').datagrid({
                    queryParams: {
                        name:$("#name").val()
                    }
                });   //点击搜索
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        modify();
                        alert('ok');
                        $("#dd").dialog("close");
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
			
		   // //tree选项框初始化
           $("#ah").tree({
               url: "/manager/permission/findTree",
			   method:'post',
			   animate:true,
			   checkbox:true
           });
            
	   });
	   
	    //列格式化方法
	   function format(val,row){
           var sel="<select name='search_type'>";
           console.log(1111111111)
           console.log(val)
	       for (let v of val){
	           console.log(v);
	           console.log(v.sname);
	           console.log(v.name);
	           sel +="<option>"+ v.sname+"</option>";
           }
           sel +="</select>";
	       return sel;
	        // var sel="<select name='search_type'>"
	        //         +"<option>修改用户|edituser|用户管理|对用户信息的修改</option>"
	        //         +"<option>修改用户|edituser|用户管理|对用户信息的修改</option>"
	        //         +"<option>修改用户|edituser|用户管理|对用户信息的修改</option>"
	        //         +"<option>修改用户|edituser|用户管理|对用户信息的修改</option>"
	        //         +"<option>修改用户|edituser|用户管理|对用户信息的修改</option></select>"
			// return sel;
	  }
	  
	  function modify() {
	       var id = $("#rid").val();
	       var name = $("#rname").val();
	       // indeterminate表示
	       var nodes= $("#ah").tree('getChecked', ['checked','indeterminate']);
	       var permissionsId = [];
            for (let node of nodes){
                // console.log(node.id);
                permissionsId.push(node.id);
            }
          $.ajax({
              url:"/manager/role/modifyRole",
              data: {
                  id: id,
                  name:name,
                  permissions:permissionsId,
              },
              dataType: 'json',
              method: 'get',
              success: function (res) {
                if (res.code ==200){
                    $("#userlist").datalist("reload");
                }
          }
          })
      }
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>角色查询：</strong></td>
    <td height="30">
        <input type="text" id="name" name="keyword" size=20 placeholder="角色名称"/>
        <a id="submit_search">搜索</a>
    </td>
  </form>
  <table id="userlist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="rid" name="name" style="width:50%" data-options="label:'角色ID:'" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="rname" name="name" style="width:50%" data-options="label:'角色名称:',required:true">
            </div>
             <div style="margin-bottom:20px">
                  <table style="width:48%">
                    <td valign="top" style="width:50px">
                                                              权限:
                    </td>
                    <td><ul id="ah"></ul></td>
                  </table>
            </div>
        </form>
           </div>
    </div>
</body>
</html>